<template>
	<view class="container">
		<view class="box">
			<!-- 			<view class="title">
				{{name}}

			</view> -->
			<!-- @longtap="bc_code" -->
			<view class="qrcodeImg">
				<image :src="img" mode="" show-menu-by-longpress></image>
			</view>
			<!-- 			<view class="text">
				微信扫一扫或长按打开
			</view> -->

		</view>
		<view class="content">
			长按图片可收藏与分享
		</view>
		<view class="bottom">
			<view class="box2" @click="gocustom">
				<view class="boximg">
					<image src="/static/images/signIn/download.png" mode=""></image>
				</view>
				原生
			</view>
			<view class="box2" @click="gotemplate">
				<view class="boximg">
					<image src="/static/images/signIn/muban.png" mode=""></image>
				</view>
				模板
			</view>
			<view class="box2" @click="saveInAlbum">
				<view class="boximg">
					<image src="/static/images/signIn/weCart-circle.png" mode=""></image>
				</view>
				保存
			</view>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue';
	import {
		getImage
	} from '@/api/index.js';

	export default {

		data() {
			return {
				img: "",
				name: "",
				code: "",
				ID: "234"
			}
		},
		onLoad(options) {
			this.name = options.name
			this.code = options.code
			if (this.code == undefined) {
				this.code = uni.getStorageSync('code');
			}
			this.ID = options.ID
		},
		onShow() {
			this.init()
		},
		methods: {
			//长按保存二维码
			bc_code() {
				let that = this;
				//console.log('保存二维码')
				uni.downloadFile({ //获得二维码的临时地址
					url: this.img,
					success: (res) => {
						//console.log('获取url',res)
						console.log(res.tempFilePath, 'tempsdddddddddddddddddddddddddddd');
						if (res.statusCode == 200) {
							uni.saveImageToPhotosAlbum({

								filePath: res.tempFilePath, //传入临时地址
								success() {
									uni.showToast({
										title: '保存成功',
										duration: 2000
									});
								},
								fail() {
									uni.showToast({
										title: '保存失败',
										icon:"error",
										duration: 2000
									});
								}
							})
						}
					}
				})
			},

			gotemplate() {

				uni.navigateTo({
					url: "signIn-template?code=" + this.code
				})
			},
			gocustom() {
				uni.navigateTo({
					url: "custom-qrCode?code=" + this.code
				})
			},
			saveInAlbum() {
				// 调用代码
				Vue.prototype.$uniApi.saveImage(this.img)
			},
			init() {
				uni.showLoading({
					title: '正在加载···'
				})
				console.log(this.ID, 'ididid1111');
				const templateID = uni.getStorageSync('templateID');
				if (templateID == undefined) {
					console.log(this.ID, 'undefined');
					
					getImage({
						data: {
							code: this.code,
						}
					}).then(res => {
						if (res.code == 1) {
							console.log(res.data);
							this.img = res.data.images;
							uni.hideLoading()
						}
					})
				} else {
					console.log(this.ID, 'idididiid222');
					getImage({
						data: {
							code: this.code,
							id: templateID
						}
					}).then(res => {
						if (res.code == 1) {
							console.log(res.data);
							this.img = res.data.images;
							uni.hideLoading()
						}
					})
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		width: 100%;
		background-color: #ffffff;
		min-height: 100vh;

		.box {
			width: 680upx;
			margin: 0 auto;
			background-color: #f8f8f8;
			height: 680upx;
			margin-top: 30upx;
			box-shadow: 0 0 12upx #999;

			// border: 1px solid rgba($color: #000000, $alpha: 0);
			.title {
				line-height: 70upx;
				width: 600upx;
				margin: 0 auto;
				border-bottom: 1px solid #000000;
				text-align: center;
				padding-bottom: 16upx;
				text-overflow: ellipsis;
				/*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/
				white-space: nowrap;
				/*让文字不换行*/
				overflow: hidden;
				/*超出要隐藏*/
			}

			.qrcodeImg {
				margin: 0 auto;
				width: 100%;
				height: 100%;

				// background-color: pink;
				image {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				margin-top: 50upx;
				font-size: 28upx;
				text-align: center;
			}
		}

		.content {
			margin-top: 50upx;
			font-size: 30upx;
			text-align: center;
		}

		.bottom {
			bottom: 0;
			position: fixed;
			height: 220upx;
			width: 100%;
			background-color: #ededed;
			border-radius: 18upx 18upx 0 0;
			display: flex;
			justify-content: space-around;
			box-shadow: 0 0 5upx #eee;

			.box2 {
				text-align: center;
				font-size: 24upx;

				.boximg {
					margin-bottom: 20upx;
					width: 90upx;
					height: 90upx;
					padding: 15upx;
					background-color: #fff;
					border-radius: 8upx;
					margin-top: 30upx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>
